<script setup>
import { ref, reactive, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'

import { Search } from '@element-plus/icons-vue'
import invitateDrawer from './invitateDrawer.vue'
const router = useRouter()
const props = defineProps({
	activeKey: Number
})
const drawer = ref(false)
const statusObj = {
	sended: '已送达'
}
const customerDetails = ref({})
const tableList = ref([
	{
		corp_id: '1747535423434273793',
		corp_name: null,
		created_at: 1666749303,
		external_user_avatar: 'http://wx.qlogo.cn/mmhead/UsichrXlnR9JTWYRlIyh8KQLTPiavw1TspZFE6iaRf7ZMtg6SWD4Hic1Cw/0',
		external_user_ext_id: 'wmgizUDQAAJctJAQ3xgF7TXcCji6RrSw',
		external_user_id: 1273838504,
		external_user_name: '2021',
		group_chat_ext_id: 'wrtnlaOgAAfjRiKnLpkooDGCpY50ZxkA',
		group_mission_id: 15318,
		group_name: '张磊,刘银豪,三森',
		has_in: null,
		id: 1430914,
		in_group_chat: false,
		main_mission_id: 10692,
		remark: '2021',
		send_time: 1666749317,
		staff_ext_id: 'wogizUDQAAOn_Yu3HqqR2SaFqBFElIbA',
		staff_id: 19389709,
		staff_name: '张磊',
		status: 1,
		sub_mission_id: 27818
	}
])
const formInline = reactive({
	customer: '',
	staff: '',
	status: '',
	enter: '',
	group: '',
	number: '',
	sedStatus: '',
	service: ''
})

const statusList = [
	{
		id: 1,
		label: '未收到邀请'
	},
	{
		id: 2,
		label: '已收到邀请'
	},
	{
		id: 3,
		label: '客户已不再是好友'
	},
	{
		id: 4,
		label: '客户接收已达上限'
	}
]
watch(
	props,
	(newValue, oldValue) => {
		console.log(newValue)
		if (newValue.activeKey === 1) {
			tableList.value = [
				{
					corp_id: '1747535423434273793',
					corp_name: null,
					created_at: 1666749303,
					external_user_avatar:
						'http://wx.qlogo.cn/mmhead/UsichrXlnR9JTWYRlIyh8KQLTPiavw1TspZFE6iaRf7ZMtg6SWD4Hic1Cw/0',
					external_user_ext_id: 'wmgizUDQAAJctJAQ3xgF7TXcCji6RrSw',
					external_user_id: 1273838504,
					external_user_name: '2021',
					group_chat_ext_id: 'wrtnlaOgAAfjRiKnLpkooDGCpY50ZxkA',
					group_mission_id: 15318,
					group_name: '张磊,刘银豪,三森',
					has_in: null,
					id: 1430914,
					in_group_chat: false,
					main_mission_id: 10692,
					remark: '2021',
					send_time: 1666749317,
					staff_ext_id: 'wogizUDQAAOn_Yu3HqqR2SaFqBFElIbA',
					staff_id: 19389709,
					staff_name: '张磊',
					status: 1,
					sub_mission_id: 27818
				}
			]
		} else {
			tableList.value = [
				{
					corp_name: '创新世界科技有限公司',
					mission_count: 1,
					mission_detail: [
						{
							check_status: 1,
							corp_id: '1747535423434273793',
							created_at: 1666749303,
							external_user_list: '["wmgizUDQAAJctJAQ3xgF7TXcCji6RrSw"]',
							fail_limit_count: 0,
							fail_no_friend_count: 0,
							failed_code: null,
							failed_reason: null,
							group_mission_id: 15318,
							group_tag_id: null,
							has_notified: true,
							id: 27818,
							main_mission_id: 10692,
							msgid: 'msgtnlaOgAAWH4IXM2xCgihwwEQJ9HTjg',
							result: '{"1": 1}',
							staff_avatar: 'https://mpa.oss-cn-hangzhou.aliyuncs.com/weiban-prod/default-avatar.png',
							staff_ext_id: 'wogizUDQAAOn_Yu3HqqR2SaFqBFElIbA',
							staff_id: 19389709,
							staff_name: '张磊',
							status: 'sended',
							success_count: 1,
							total_target_count: 1
						}
					],
					mission_sended_count: 1,
					staff_avatar: 'https://mpa.oss-cn-hangzhou.aliyuncs.com/weiban-prod/default-avatar.png',
					staff_ext_id: 'wogizUDQAAOn_Yu3HqqR2SaFqBFElIbA',
					staff_name: '张磊',
					success_count: 1,
					total_target_count: 1
				}
			]
		}
	},
	{
		deep: true
	}
)
const getStatus = (status) => {
	return statusList.filter((item) => {
		return item.id === status
	})[0].label
}
const tableRowClassName = ({ row, rowIndex }) => {
	return 'pointer'
}
const changeDrawer = (visible) => {
	drawer.value = visible
}
const invitateDrawerRef = ref(null)
const goToDetails = (details) => {
	console.log(details,'yuiyuiuyi')
	customerDetails.value = details
	drawer.value = true
	setTimeout(() => {
		invitateDrawerRef.value.show(details.id)
	}, 5);
}


</script>
<template>
	<div class="main">
		<el-scrollbar max-height="100%">
			<div class="header">
				<div class="input-group" v-if="props.activeKey === 1">
					<el-form :inline="true" :model="formInline" class="form-box">
						<el-form-item label="搜索客户：">
							<el-input v-model="formInline.customer" :suffix-icon="Search" placeholder="请输入要搜索的客户" />
						</el-form-item>
						<el-form-item label="所属客服：">
							<el-select v-model="formInline.staff" clearable placeholder="请选择客服">
								<div style="" class="select-input">
									<p>全部客服（1）</p>
									<el-input v-model="formInline.service" :suffix-icon="Search" placeholder="请输入客服后回车" />
								</div>
								<el-option value="张磊">
									<div class="option-box">
										<img
											src="https://mpa.oss-cn-hangzhou.aliyuncs.com/weiban-prod/default-avatar.png"
											class="avatar-img"
										/>
										张磊
									</div>
								</el-option>
								<p class="no-more">没有更多了~</p>
							</el-select>
						</el-form-item>
						<el-form-item label="送达状态：">
							<el-select v-model="formInline.status" placeholder="请选择送达状态">
								<el-option v-for="item in statusList" :key="item.id" :label="item.label" :value="item.id" />
							</el-select>
						</el-form-item>
						<el-form-item label="是否入群：">
							<el-select v-model="formInline.enter" placeholder="客户是否入群">
								<el-option label="已入群" :value="1" />
								<el-option label="为入群" :value="0" />
							</el-select>
						</el-form-item>
						<el-form-item label="邀请群聊：">
							<el-select v-model="formInline.group" clearable placeholder="请选择客服">
								<el-option label="已入群" :value="1" />
								<el-option label="为入群" :value="0" />
							</el-select>
						</el-form-item>

						<el-form-item class="form-btn">
							<div class="footer-btn">
								<el-button style="width: 92px; height: 36px" @click="onSubmit">重置</el-button>
							</div>
						</el-form-item>
					</el-form>
				</div>
				<div class="input-group" v-else>
					<el-form :inline="true" :model="formInline" class="form-box">
						<el-form-item label="搜索成员：">
							<el-input v-model="formInline.customer" :suffix-icon="Search" placeholder="请输入要搜索的成员" />
						</el-form-item>
						<el-form-item label="收到任务条数：">
							<el-select v-model="formInline.number" placeholder="请选择收到任务条数">
								<el-option label="1条" :value="1" />
								<el-option label="多条" :value="2" />
							</el-select>
						</el-form-item>
						<el-form-item label="发送状态：">
							<el-select v-model="formInline.sedStatus" placeholder="请选择送达状态">
								<el-option label="未完成发送" :value="1" />
								<el-option label="已完成送达" :value="2" />
							</el-select>
						</el-form-item>

						<el-form-item class="form-btn">
							<div class="footer-btn">
								<el-button style="width: 92px; height: 36px" @click="onSubmit">重置</el-button>
							</div>
						</el-form-item>
					</el-form>
				</div>
			</div>
			<p class="total-title">共{{ tableList.length }}个{{ props.activeKey === 1 ? '客户' : '成员' }}</p>
			<div class="table-demo">
				<el-table
					:row-class-name="tableRowClassName"
					:data="tableList"
					border
					style="width: 100%; margin-top: 20px"
					v-if="props.activeKey === 1"
				>
					<el-table-column label="客户">
						<template #default="scope">
							<div class="user">
								<img :src="scope.row.external_user_avatar" class="avatar-img" />
								<div class="info">
									<div class="name">
										<span>{{ scope.row.remark }}</span> <span class="wx">@微信</span>
									</div>
									<div>{{ scope.row.remark }}</div>
								</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="address" label="所属成员">
						<template #default="scope">
							<div class="tag-list">
								<span class="ame-popover-slot">
									<el-icon class="user-icon"><UserFilled /></el-icon>
									<span>{{ scope.row.staff_name }}</span>
								</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="送达状态" width="220">
						<template #default="scope">
							{{ getStatus(scope.row.status) }}
						</template>
					</el-table-column>
					<el-table-column prop="group_name" label="邀请群聊" width="220" />
					<el-table-column label="是否入群" width="120">
						<template #default="scope">
							<span :class="in_group_chat ? '' : 'no-in'">{{ in_group_chat ? '已入群' : '未入群' }}</span>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="240" align="right">
						<template #default="scope">
							<div class="table-operation">
								<span @click="goToDetails(scope.row)" class="send">客户详情</span>
							</div>
						</template>
					</el-table-column>
				</el-table>
				<el-table :data="tableList" border style="width: 100%; margin-top: 20px" v-else>
					<el-table-column prop="mission_name" label="成员">
						<template #default="scope">
							<div class="user">
								<img :src="scope.row.staff_avatar" class="avatar-img" />
								<div class="info">
									<div class="name">
										<span>{{ scope.row.staff_name }}</span> <span class="wx">@{{ scope.row.corp_name }}</span>
									</div>
								</div>
							</div>
						</template>
					</el-table-column>

					<el-table-column prop="mission_count" label="客户数" width="120" />
					<el-table-column prop="success_count" label="已邀请" width="120" />
					<el-table-column prop="mission_sended_count" label="收到任务条数" width="120" />
					<el-table-column label="发送状态" width="120">
						<template #default="scope">
							<el-tag class="ml-2" type="success">{{ statusObj[scope.row.mission_detail[0].status] }}</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="240" align="right">
						<template #default="scope">
							<div class="table-operation">
								<el-tooltip effect="light" content="该员工已发送该消息，无法提醒发送" placement="top">
									<span v-show="scope.row.mission_detail[0].has_notified" class="send-no">提醒发送</span>
								</el-tooltip>
							</div>
						</template>
					</el-table-column>
				</el-table>
			</div>

			<invitateDrawer ref="invitateDrawerRef" :customerDetails="customerDetails" :drawer="drawer" @changeDrawer="changeDrawer" />
		</el-scrollbar>
	</div>
</template>
<style lang="scss" scoped>
.pointer {
	cursor: pointer;
}
.no-more {
	width: 100%;
	padding: 20px 0;
	color: rgba(0, 0, 0, 0.45);
	font-size: 14px;
	text-align: center;
}
.option-box {
	display: flex;
	align-items: center;
	width: 100%;
}
.avatar-img {
	width: 32px;
	height: 32px;
	margin-right: 5px;
}
.select-input {
	padding: 0 32px 0 20px;
	margin-bottom: 10px;
	p {
		margin-bottom: 10px;
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #595959;
		line-height: 22px;
	}
}

.main {
	width: 100%;
	height: 100%;

	padding: 0px 24px 20px 24px;
	.no-in {
		color: #d53e3e;
	}

	.table-demo {
		:deep(.el-table thead) {
			color: rgba(65, 66, 74, 0.85);
			font-weight: 500;
		}
		:deep(.el-table.is-scrolling-left.el-table--border .el-table-fixed-column--left.is-last-column.el-table__cell) {
			border-right: 0;
		}
		:deep(.el-table--border .el-table__cell) {
			border-right: 0;
		}
	}
	:deep(.el-table th.el-table__cell) {
		background-color: #fafafa;
	}

	.footer-btn {
		width: 100%;
		display: flex;
		justify-content: flex-end;
	}
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		.input-group {
			width: 100%;
		}
	}
	.user {
		display: flex;
		.avatar-img {
			width: 32px;
			height: 32px;
			border-radius: 2px;
			margin-right: 10px;
		}
	}
	.info {
		font-size: 12px;
		line-height: 22px;
		color: #bababa;
		.name {
			font-weight: 700;
			font-size: 13px;
			line-height: 18px;
			color: #333;
		}
		.wx {
			font-size: 12px;
			line-height: 17px;
			color: #5ec75d;
		}
	}

	.tag-list {
		.ame-popover-slot {
			display: inline-flex;
			align-items: center;
			max-width: 136px;
			padding: 3px 7px;
			background: #fff;
			border: 1px solid #d9d9d9;
			border-radius: 2px;
			font-size: 13px;
			color: rgba(0, 0, 0, 0.65);
			.user-icon {
				font-size: 12px;
				color: #7ea4d1;
				margin-right: 4px;
			}
		}
	}
	.total-title {
		position: relative;
		display: inline-block;
		font-weight: 700;
		font-size: 14px;
		line-height: 22px;
		color: rgba(18, 18, 22, 0.85);
	}
	.form-box {
		position: relative;
		width: 100%;
		.form-btn {
			position: absolute;
			right: 0;
		}
	}

	.table-operation {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: 100%;

		.send {
			color: #1890ff;
			cursor: pointer;
		}
		.send-no {
			color: rgba(0, 0, 0, 0.25);
		}
	}
}
</style>
